window.addEventListener('load', function () {

  var focus = document.querySelector('.focus');
  var focusWidth = focus.offsetWidth;
  var arrow_l = document.querySelector('.arrow-l');
  var arrow_r = document.querySelector('.arrow-r');

  focus.addEventListener('mouseenter', function () {
    arrow_l.style.display = 'block';
    arrow_r.style.display = 'block';

    clearInterval(timer);
  })
  focus.addEventListener('mouseleave', function () {
    arrow_l.style.display = 'none';
    arrow_r.style.display = 'none';

    timer = setInterval(() => {
      arrow_r.click();
    }, 3000);
  })

  // 生成小圆圈
  var ul = focus.querySelector('ul');
  var circle = document.querySelector('.circle');
  for (let i = 0; i < ul.children.length; i++) {
    let li = document.createElement('li');
    li.setAttribute('index', i + '');
    circle.appendChild(li);

    circle.children[0].className = 'current';

    li.addEventListener('click', function () {
      for (let i = 0; i < circle.children.length; i++) {
        circle.children[i].className = '';
      }
      this.className = 'current';


      animate(ul, -(focusWidth * li.getAttribute('index')));
      circleCount = parseInt(li.getAttribute('index'));
      num = circleCount;

    })
  }
  var additionLi = ul.children[0].cloneNode(true);
  ul.appendChild(additionLi);

  var num = 0;
  var circleCount = 0;
  var flag = true;
  arrow_r.addEventListener('click', function () {
    if (flag) {
      flag = false;
      if (num == 4) {
        ul.style.left = 0 + 'px';
        num = 0;
      }

      num++;
      animate(ul, -num * focusWidth, function () {
        flag = true;
      });

      circleCount++;
      if (circleCount == circle.children.length) {
        circleCount = 0;
      }
      for (let i = 0; i < circle.children.length; i++) {
        circle.children[i].className = '';
      }
      circle.children[circleCount].className = 'current';
    }
  });

  arrow_l.addEventListener('click', function () {
    if (flag) {
      flag = false;
      if (num == 0) {
        num = ul.children.length - 1;
        ul.style.left = -num * focusWidth + 'px';
      }

      num--;
      animate(ul, -num * focusWidth, function () {
        flag = true;
      });

      circleCount--;
      if (circleCount < 0) {
        circleCount = circle.children.length - 1;
      }
      for (let i = 0; i < circle.children.length; i++) {
        circle.children[i].className = '';
      }
      circle.children[circleCount].className = 'current';
    }
  })

  var timer = setInterval(() => {
    arrow_r.click();
  }, 3000)
});